import React, { useContext, useReducer } from 'react'
import reducer from './reducer'
import initialState from './store'
import { TodoContext } from './index'

const List: React.FC = () => {
  const { todoList, dispatch } = useContext(TodoContext)

  function del(id: string) {
    dispatch({ type: 'delete', payload: id })
  }

  return (
    <div>
      <p>list</p>
      <ul>
        {todoList.map(i => {
          return (
            <li key={i.id}>
              <span>{i.title}</span>
              <button onClick={() => del(i.id)}>删除</button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default List
